

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/HexoPage/img/favicon.jpeg">
  <link rel="icon" href="/HexoPage/img/favicon.jpeg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="xiaoaodi">
  <meta name="keywords" content="">
  
    <meta name="description" content="一、Promise的理解与使用1、概念: ​    Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。  Pending  正在做。。。 R">
<meta property="og:type" content="article">
<meta property="og:title" content="Promise的理解与使用(快速上手版）">
<meta property="og:url" content="http://xiao_aodi.gitee.io/hexopage/2022/03/24/Promise%E7%AC%94%E8%AE%B0/index.html">
<meta property="og:site_name" content="~吃椰子灰的胖丁">
<meta property="og:description" content="一、Promise的理解与使用1、概念: ​    Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。  Pending  正在做。。。 R">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-03-24T15:00:00.000Z">
<meta property="article:modified_time" content="2022-03-24T13:46:19.912Z">
<meta property="article:author" content="xiaoaodi">
<meta name="twitter:card" content="summary_large_image">
  
  
  <title>Promise的理解与使用(快速上手版） - ~吃椰子灰的胖丁</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/HexoPage/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"xiao_aodi.gitee.io","root":"/HexoPage/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":false,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/HexoPage/local-search.xml"};
  </script>
  <script  src="/HexoPage/js/utils.js" ></script>
  <script  src="/HexoPage/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.1.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/HexoPage/">
      <strong>Xiao_aodi</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>
   
      <!-- 天气网 -->
      


    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/HexoPage/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/HexoPage/img/wallhaven-wqve97.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Promise的理解与使用(快速上手版）">
              
            </span>
            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      xiaoaodi
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-24 23:00" pubdate>
        2022年3月24日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      15k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      125 分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Promise的理解与使用(快速上手版）</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2022年3月24日 晚上
                
              </p>
            
            <div class="markdown-body">
              <h1 id="一、Promise的理解与使用"><a href="#一、Promise的理解与使用" class="headerlink" title="一、Promise的理解与使用"></a>一、Promise的理解与使用</h1><p>1、概念:</p>
<p>​    Promise是<code>异步编程的一种解决方案</code>，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。</p>
<p>通俗讲，<code>Promise是一个许诺、承诺</code>,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。</p>
<ul>
<li>Pending  正在做。。。</li>
<li>Resolved 完成这个承诺</li>
<li>Rejected 这个承诺没有完成，失败了</li>
</ul>
<p>​    Promise 用来预定一个不一定能完成的任务，要么成功，要么失败</p>
<p>​    在具体的程序中具体的体现，通常用来封装一个异步任务，提供承诺结果</p>
<p>Promise 是异步编程的一种解决方案，<code>主要用来解决回调地狱的问题，可以有效的减少回调嵌套</code>。真正解决需要<code>配合async/await</code></p>
<p>2、特点:</p>
<p>​    (1)对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。</p>
<p>​    (2)一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。</p>
<p>3、缺点:</p>
<p>​    (1)无法取消Promise，一旦新建它就会立即执行，无法中途取消。和一般的对象不一样，无需调用。</p>
<p>​    (2)如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。</p>
<p>​    (3)当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）</p>
<h2 id="1-Promise是什么"><a href="#1-Promise是什么" class="headerlink" title="1. Promise是什么?"></a>1. Promise是什么?</h2><h3 id="1-1-理解"><a href="#1-1-理解" class="headerlink" title="1.1 理解"></a>1.1 理解</h3><ol>
<li>抽象表达:</li>
</ol>
<p>​    1) Promise 是一门新的技术(ES6 规范) </p>
<p>​    2)Promise 是 JS 中<code>进行异步编程</code>的新解决方案 备注：旧方案是单纯使用回调函数</p>
<ol start="2">
<li>具体表达:</li>
</ol>
<ol>
<li><p>从语法上来说: Promise 是一个<code>构造函数</code></p>
</li>
<li><p>从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功&#x2F; 失败的结果值</p>
</li>
</ol>
<h3 id="1-2-promise-的状态"><a href="#1-2-promise-的状态" class="headerlink" title="1.2 promise 的状态"></a>1.2 promise 的状态</h3><h4 id="1-2-1-promise-的状态"><a href="#1-2-1-promise-的状态" class="headerlink" title="1.2.1 promise 的状态"></a>1.2.1 promise 的状态</h4><p>实例对象中的一个属性 『PromiseState』</p>
<ul>
<li>pending  未决定的</li>
<li>resolved &#x2F; fullfilled  成功</li>
<li>rejected  失败</li>
</ul>
<h4 id="1-2-2-promise-的状态改变"><a href="#1-2-2-promise-的状态改变" class="headerlink" title="1.2.2  promise 的状态改变"></a>1.2.2  promise 的状态改变</h4><ol>
<li><p>pending 变为 resolved </p>
</li>
<li><p>pending 变为 rejected</p>
</li>
</ol>
<p>  说明: <code>只有这 2 种</code>, 且一个 promise 对象<code>只能改变一次</code> 无论变为成功还是失败, 都会有一个结果数据 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason</p>
<h3 id="1-3-promise的基本使用"><a href="#1-3-promise的基本使用" class="headerlink" title="1.3 promise的基本使用"></a>1.3 promise的基本使用</h3><h4 id="1-3-1-使用"><a href="#1-3-1-使用" class="headerlink" title="1..3.1 使用"></a>1..3.1 使用</h4><figure class="highlight html"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></div></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#box</span> &#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: solid <span class="hljs-number">1px</span> <span class="hljs-number">#ccc</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ha&quot;</span>&gt;</span> 大抽奖<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span><br>            进行抽奖<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-keyword">function</span> <span class="hljs-title function_">rand</span>(<span class="hljs-params">n, m</span>) &#123;</span><br><span class="language-javascript">                <span class="hljs-keyword">return</span> <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">ceil</span>(<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * (n - m + <span class="hljs-number">1</span>) + m - <span class="hljs-number">1</span>)</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;button&quot;</span>)[<span class="hljs-number">0</span>].<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-comment">//     setTimeout(() =&gt; &#123;</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         let value =  rand(1,100);</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         if(value &lt;=30)</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         &#123;</span></span><br><span class="language-javascript">            <span class="hljs-comment">//             alert(&quot;你中奖了&quot;)</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         &#125;</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         else&#123;</span></span><br><span class="language-javascript">            <span class="hljs-comment">//             alert(&quot;再接再厉&quot;)</span></span><br><span class="language-javascript">            <span class="hljs-comment">//         &#125;</span></span><br><span class="language-javascript">            <span class="hljs-comment">//     &#125;, 1000);</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">            <span class="hljs-comment">//用promise函数进行修改</span></span><br><span class="language-javascript">            <span class="hljs-keyword">const</span> pro = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="language-javascript">                <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;</span><br><span class="language-javascript">                    <span class="hljs-keyword">let</span> value = <span class="hljs-title function_">rand</span>(<span class="hljs-number">1</span>, <span class="hljs-number">100</span>);</span><br><span class="language-javascript">                    <span class="hljs-keyword">if</span> (value &lt;= <span class="hljs-number">30</span>) &#123;</span><br><span class="language-javascript">                        <span class="hljs-title function_">resolve</span>(value)</span><br><span class="language-javascript">                    &#125;</span><br><span class="language-javascript">                    <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">                        <span class="hljs-title function_">reject</span>(value)</span><br><span class="language-javascript">                    &#125;</span><br><span class="language-javascript">                &#125;, <span class="hljs-number">1000</span>);</span><br><span class="language-javascript">            &#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            pro.<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=&gt;</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;恭喜你中将了&quot;</span> + value)</span><br><span class="language-javascript">            &#125;,<span class="hljs-function">(<span class="hljs-params">reason</span>)=&gt;</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;再接再厉&quot;</span> + reason)</span><br><span class="language-javascript">            &#125;)</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="1-3-2-使用-promise-封装-ajax-异步请求"><a href="#1-3-2-使用-promise-封装-ajax-异步请求" class="headerlink" title="1.3.2 使用 promise 封装 ajax 异步请求"></a>1.3.2 使用 promise 封装 ajax 异步请求</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>封装请求<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span><br>        发送请求<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">const</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">&quot;button&quot;</span>)[<span class="hljs-number">0</span>].<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">            <span class="hljs-keyword">const</span> pro = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolove, reject</span>) =&gt;</span> &#123;</span><br><span class="language-javascript">                <span class="hljs-keyword">const</span> xhr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>()</span><br><span class="language-javascript">                xhr.<span class="hljs-title function_">open</span>(<span class="hljs-string">&quot;GET&quot;</span>, <span class="hljs-string">&quot;http://127.0.0.1:9000/server&quot;</span>)</span><br><span class="language-javascript">                xhr.<span class="hljs-title function_">send</span>()</span><br><span class="language-javascript">                xhr.<span class="hljs-property">onreadystatechange</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">                    <span class="hljs-keyword">if</span> (xhr.<span class="hljs-property">readyState</span> === <span class="hljs-number">4</span>) &#123;</span><br><span class="language-javascript">                        <span class="hljs-keyword">if</span> (xhr.<span class="hljs-property">status</span> &gt;= <span class="hljs-number">200</span> &amp;&amp; xhr.<span class="hljs-property">status</span> &lt; <span class="hljs-number">300</span>) &#123;</span><br><span class="language-javascript">                            <span class="hljs-title function_">resolove</span>(xhr.<span class="hljs-property">response</span>)</span><br><span class="language-javascript">                        &#125;</span><br><span class="language-javascript">                        <span class="hljs-keyword">else</span> &#123;</span><br><span class="language-javascript">                            <span class="hljs-title function_">reject</span>(xhr.<span class="hljs-property">status</span>)</span><br><span class="language-javascript">                        &#125;</span><br><span class="language-javascript">                    &#125;</span><br><span class="language-javascript">                &#125;</span><br><span class="language-javascript">            &#125;);</span><br><span class="language-javascript"></span><br><span class="language-javascript">            pro.<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=&gt;</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value)</span><br><span class="language-javascript">            &#125;,<span class="hljs-function">(<span class="hljs-params">reason</span>)=&gt;</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reason)</span><br><span class="language-javascript">            &#125;)</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//服务端代码</span><br><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;express&quot;</span>)<br><br><span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> <span class="hljs-title function_">express</span>();<br><br>app.<span class="hljs-title function_">all</span>(<span class="hljs-string">&quot;/server&quot;</span>,<span class="hljs-function">(<span class="hljs-params">request,responed</span>)=&gt;</span>&#123;<br>    responed.<span class="hljs-title function_">setHeader</span>(<span class="hljs-string">&quot;Access-Control-Allow-Origin&quot;</span>,<span class="hljs-string">&quot;*&quot;</span>)<br>    responed.<span class="hljs-title function_">send</span>(<span class="hljs-string">&quot;server send&quot;</span>)<br>&#125;)<br><br>app.<span class="hljs-title function_">listen</span>(<span class="hljs-string">&quot;9000&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;9000端口的监听已经开启&quot;</span>)<br>&#125;)<br></code></pre></td></tr></table></figure>

<h4 id="1-3-3-fs模块使用Promise"><a href="#1-3-3-fs模块使用Promise" class="headerlink" title="1.3.3 fs模块使用Promise"></a>1.3.3 fs模块使用Promise</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> fs =<span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;fs&#x27;</span>)<br><br><span class="hljs-comment">// fs.readFile(&#x27;./Code/resource/content.txt&#x27;,(err, data)=&gt;&#123;</span><br><span class="hljs-comment">//     if(err)</span><br><span class="hljs-comment">//     &#123;</span><br><span class="hljs-comment">//         throw err;</span><br><span class="hljs-comment">//     &#125;</span><br><span class="hljs-comment">//     console.log(data.toString())</span><br><span class="hljs-comment">// &#125;)</span><br><br><br><span class="hljs-keyword">const</span> pro = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>        fs.<span class="hljs-title function_">readFile</span>(<span class="hljs-string">&#x27;./Code/resource/content.txt&#x27;</span>,<span class="hljs-function">(<span class="hljs-params">err, data</span>)=&gt;</span>&#123;<br>        <span class="hljs-keyword">if</span>(err)<br>        &#123;<br>            <span class="hljs-title function_">reject</span>(err)<br>        &#125;<br>        <span class="hljs-keyword">else</span>&#123;<br>            <span class="hljs-title function_">resolve</span>(data)<br>        &#125;<br>    &#125;)<br>&#125;)<br><br>pro.<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value.<span class="hljs-title function_">toString</span>())<br>&#125;, <span class="hljs-function">(<span class="hljs-params">err</span>)=&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err,<span class="hljs-title function_">toString</span>())<br>&#125;)<br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">function</span> <span class="hljs-title function_">minReadFile</span>(<span class="hljs-params">path</span>)<br>&#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>)=&gt;</span>&#123;<br>        <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;fs&quot;</span>).<span class="hljs-title function_">readFile</span>(path,<span class="hljs-function">(<span class="hljs-params">err,data</span>)=&gt;</span>&#123;<br>            <span class="hljs-keyword">if</span>(err)<br>            &#123;<br>                <span class="hljs-title function_">reject</span>(err)<br>            &#125;<br>            <span class="hljs-keyword">else</span>&#123;<br>                <span class="hljs-title function_">resolve</span>(data)<br>            &#125;<br>        &#125;)<br>    &#125;)<br>&#125;<br><br><span class="hljs-title function_">minReadFile</span>(<span class="hljs-string">&quot;./Code/resource/content.txt&quot;</span>).<span class="hljs-title function_">then</span>(<span class="hljs-function">(<span class="hljs-params">value</span>)=&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value.<span class="hljs-title function_">toString</span>())<br>&#125; , <span class="hljs-function">(<span class="hljs-params">reson</span>)=&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reson.<span class="hljs-title function_">toString</span>())<br>&#125;)<br></code></pre></td></tr></table></figure>

<h4 id="1-3-4-util-promisify方法"><a href="#1-3-4-util-promisify方法" class="headerlink" title="1.3.4 util.promisify方法"></a>1.3.4 <code>util.promisify方法</code></h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> util = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;util&quot;</span>)<br><br><span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">&quot;fs&quot;</span>)<br><br><span class="hljs-keyword">let</span> minReadFile = util.<span class="hljs-title function_">promisify</span>(fs.<span class="hljs-property">readFile</span>);<br><br><span class="hljs-title function_">minReadFile</span>(<span class="hljs-string">&quot;./Code/resource/content.txt&quot;</span>).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span>=&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value.<span class="hljs-title function_">toString</span>())<br>&#125;, <span class="hljs-function"><span class="hljs-params">reson</span> =&gt;</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(reson)<br>&#125;)<br></code></pre></td></tr></table></figure>

<h4 id="1-3-5-异常穿透"><a href="#1-3-5-异常穿透" class="headerlink" title="1.3.5.异常穿透"></a>1.3.5.异常穿透</h4><p>可以在每个then()的第二个回调函数中进行err处理,也可以利用异常穿透特性,到最后用<code>catch</code>去承接统一处理,两者一起用时,前者会生效(因为err已经将其处理,就不会再往下穿透)而走不到后面的catch</p>
<p>在每个.then()中我可以将数据再次传出给下一个then()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-title function_">mineReadFile</span>(<span class="hljs-string">&#x27;./11.txt&#x27;</span>).<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">result</span>=&gt;</span>&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result.<span class="hljs-title function_">toString</span>())<br>  <span class="hljs-keyword">return</span> result<br>&#125;,<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(err))<br>.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(data,<span class="hljs-string">&quot;2222222&quot;</span>))<br>.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">err</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;这是catch的&quot;</span>))<br></code></pre></td></tr></table></figure>

<h2 id="2-为什么要用Promise"><a href="#2-为什么要用Promise" class="headerlink" title="2. 为什么要用Promise?"></a>2. 为什么要用Promise?</h2><h3 id="2-1-指定回调函数的方式更加灵活"><a href="#2-1-指定回调函数的方式更加灵活" class="headerlink" title="2.1 指定回调函数的方式更加灵活"></a>2.1 指定回调函数的方式更加灵活</h3><ol>
<li>旧的: 必须在启动异步任务前指定 </li>
<li>promise: 启动异步任务 &#x3D;&gt; 返回promie对象 &#x3D;&gt; 给promise对象绑定回调函 数(甚至可以在异步任务结束后指定&#x2F;多个)</li>
</ol>
<h3 id="2-2-支持链式调用-可以解决回调地狱问题"><a href="#2-2-支持链式调用-可以解决回调地狱问题" class="headerlink" title="2.2 支持链式调用, 可以解决回调地狱问题"></a>2.2 支持链式调用, 可以解决回调地狱问题</h3><h4 id="2-2-1-什么是回调地狱"><a href="#2-2-1-什么是回调地狱" class="headerlink" title="2.2.1  什么是回调地狱"></a>2.2.1  什么是回调地狱</h4><p>回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调执行的条件</p>
<h4 id="2-2-2-回调地狱的缺点"><a href="#2-2-2-回调地狱的缺点" class="headerlink" title="2.2.2  回调地狱的缺点?"></a>2.2.2  回调地狱的缺点?</h4><p>不便于阅读 不便于异常处理</p>
<h4 id="2-2-3-解决方案"><a href="#2-2-3-解决方案" class="headerlink" title="2.2.3  解决方案?"></a>2.2.3  解决方案?</h4><p>promise <code>链式调用</code>,</p>
<p>用来解决回调地狱问题，但是<code>只是简单的改变格式</code>，并没有彻底解决上面的问题真正要解决上述问题，一定要利用promise再加上await和async关键字实现异步传同步</p>
<h4 id="2-2-4-终极解决方案"><a href="#2-2-4-终极解决方案" class="headerlink" title="2.2.4 终极解决方案?"></a>2.2.4 终极解决方案?</h4><p>promise +async&#x2F;await</p>
<h2 id="3-Promise中的常用-API-概述"><a href="#3-Promise中的常用-API-概述" class="headerlink" title="3. Promise中的常用 API 概述"></a>3. Promise中的常用 API 概述</h2><blockquote>
<p>此处列举几个最常用的API的概述,如果想看详细描述的可以继续往下看下方的  <strong>Promise方法的具体使用</strong> 描述</p>
</blockquote>
<h4 id="3-1-Promise-构造函数-Promise-excutor"><a href="#3-1-Promise-构造函数-Promise-excutor" class="headerlink" title="3.1 Promise 构造函数: Promise (excutor) {}"></a>3.1 Promise 构造函数: Promise (excutor) {}</h4><p>(1) executor 函数: 执行器 (resolve, reject) &#x3D;&gt; {}</p>
<p>(2) resolve 函数: 内部定义成功时我们调用的函数 value &#x3D;&gt; {} </p>
<p>(3) reject 函数: 内部定义失败时我们调用的函数 reason &#x3D;&gt; {} </p>
<p>说明: executor 会在 Promise 内部立即<code>同步调用</code>,异步操作在执行器中执行,换话说Promise支持同步也支持异步操作</p>
<h4 id="3-2-Promise-prototype-then-方法-onResolved-onRejected-x3D-gt"><a href="#3-2-Promise-prototype-then-方法-onResolved-onRejected-x3D-gt" class="headerlink" title="3.2 Promise.prototype.then 方法: (onResolved, onRejected) &#x3D;&gt; {}"></a>3.2 Promise.prototype.then 方法: (onResolved, onRejected) &#x3D;&gt; {}</h4><p>(1) onResolved 函数: 成功的回调函数 (value) &#x3D;&gt; {} </p>
<p>(2) onRejected 函数: 失败的回调函数 (reason) &#x3D;&gt; {} </p>
<p>说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调 返回一个新的 promise 对象</p>
<h4 id="3-3-Promise-prototype-catch-方法-onRejected-x3D-gt"><a href="#3-3-Promise-prototype-catch-方法-onRejected-x3D-gt" class="headerlink" title="3.3 Promise.prototype.catch 方法: (onRejected) &#x3D;&gt; {}"></a>3.3 Promise.prototype.catch 方法: (onRejected) &#x3D;&gt; {}</h4><p>(1) onRejected 函数: 失败的回调函数 (reason) &#x3D;&gt; {}</p>
<p>说明: then()的语法糖, 相当于: then(undefined, onRejected)</p>
<p>(2) 异常穿透使用:当运行到最后,没被处理的所有异常错误都会进入这个方法的回调函数中    </p>
<h4 id="3-4-Promise-resolve-方法-value-x3D-gt"><a href="#3-4-Promise-resolve-方法-value-x3D-gt" class="headerlink" title="3.4 Promise.resolve 方法: (value) &#x3D;&gt; {}"></a>3.4 Promise.resolve 方法: (value) &#x3D;&gt; {}</h4><p>(1) value: 成功的数据或 promise 对象 </p>
<p>说明: 返回一个成功&#x2F;失败的 promise 对象,直接改变promise状态</p>
<h4 id="3-5-Promise-reject-方法-reason-x3D-gt"><a href="#3-5-Promise-reject-方法-reason-x3D-gt" class="headerlink" title="3.5 Promise.reject 方法: (reason) &#x3D;&gt; {}"></a>3.5 Promise.reject 方法: (reason) &#x3D;&gt; {}</h4><p>(1) reason: 失败的原因 </p>
<p>说明: 返回一个失败的 promise 对象,直接改变promise状态,<code>代码示例同上</code></p>
<h4 id="3-6-Promise-all-方法-promises-x3D-gt"><a href="#3-6-Promise-all-方法-promises-x3D-gt" class="headerlink" title="3.6 Promise.all 方法: (promises) &#x3D;&gt; {}"></a>3.6 Promise.all 方法: (promises) &#x3D;&gt; {}</h4><p>promises: 包含 n 个 promise 的数组 </p>
<p>说明: 返回一个新的 promise, 只有所有的 promise <code>都成功才成功</code>, 只要有一 个失败了就直接失败</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123; <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;成功&#x27;</span>);  &#125;)<br><span class="hljs-keyword">let</span> p2 = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">reject</span>(<span class="hljs-string">&#x27;错误错误错误&#x27;</span>);<br><span class="hljs-keyword">let</span> p3 = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;也是成功&#x27;</span>)<br><span class="hljs-keyword">const</span> result = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([p1, p2, p3]);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<br></code></pre></td></tr></table></figure>

<h4 id="3-7-Promise-race-方法-promises-x3D-gt"><a href="#3-7-Promise-race-方法-promises-x3D-gt" class="headerlink" title="3.7 Promise.race 方法: (promises) &#x3D;&gt; {}"></a>3.7 Promise.race 方法: (promises) &#x3D;&gt; {}</h4><p>(1) promises: 包含 n 个 promise 的数组 </p>
<p>说明: 返回一个新的 promise, <code>第一个完成</code>的 promise 的结果状态就是最终的结果状态,</p>
<p>如p1延时,开启了异步,内部正常是同步进行,所以<code>p2&gt;p3&gt;p1</code>,结果是<code>P2</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br> <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>   <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>);<br> &#125;, <span class="hljs-number">1000</span>);<br>&#125;)<br><span class="hljs-keyword">let</span> p2 = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;Success&#x27;</span>);<br><span class="hljs-keyword">let</span> p3 = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;Oh Yeah&#x27;</span>);<br><span class="hljs-comment">//调用</span><br><span class="hljs-keyword">const</span> result = <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">race</span>([p1, p2, p3]);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(result);<br></code></pre></td></tr></table></figure>

<h3 id="4、Promise的几个关键问题（重点）"><a href="#4、Promise的几个关键问题（重点）" class="headerlink" title="4、Promise的几个关键问题（重点）"></a>4、Promise的几个关键问题（重点）</h3><h4 id="4-1-如何改变-promise-的状态"><a href="#4-1-如何改变-promise-的状态" class="headerlink" title="4.1 如何改变 promise 的状态?"></a>4.1 如何改变 promise 的状态?</h4><blockquote>
<p>(1) resolve(value): 如果当前是 pending 就会变为 resolved </p>
<p>(2) reject(reason): 如果当前是 pending 就会变为 rejected </p>
<p>(3) 抛出异常: 如果当前是 pending 就会变为 rejected</p>
</blockquote>
<h4 id="4-2-一个-promise-指定多个成功-x2F-失败回调函数-都会调用吗"><a href="#4-2-一个-promise-指定多个成功-x2F-失败回调函数-都会调用吗" class="headerlink" title="4.2 一个 promise 指定多个成功&#x2F;失败回调函数, 都会调用吗?"></a>4.2 一个 promise 指定多个成功&#x2F;失败回调函数, 都会调用吗?</h4><p>当 promise <code>改变为对应状态时</code>都会调用,改变状态后,多个回调函数都会调用,并不会自动停止</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;  <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>);&#125;);<br><span class="hljs-comment">///指定回调 - 1</span><br>p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value); &#125;);<br><span class="hljs-comment">//指定回调 - 2</span><br>p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <span class="hljs-title function_">alert</span>(value);&#125;);<br></code></pre></td></tr></table></figure>

<p>4.3 改变 promise 状态和指定回调函数谁先谁后?</p>
<p>(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调 </p>
<p>​    先指定回调再改变状态(<code>异步</code>):先指定回调–&gt; 再改变状态 –&gt;改变状态后才进入异步队列执行回调函数</p>
<p>​    先改状态再指定回调(<code>同步</code>):改变状态 –&gt;指定回调 <code>并马上执行</code>回调</p>
<p>(2) 如何先改状态再<code>指定</code>回调?   –&gt;注意:指定并不是执行</p>
<p>​    ① 在执行器中直接调用 resolve()&#x2F;reject() –&gt;即,不使用定时器等方法,执行器内直接同步操作 </p>
<p>​    ② 延迟更长时间才调用 then()     –&gt;即,在<code>.then()</code>这个方法外再包一层例如延时器这种方法</p>
<p>(3) 什么时候才能得到数据? </p>
<p>​    ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据 </p>
<p>​    ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br><span class="hljs-comment">//异步写法,这样写会先指定回调,再改变状态</span><br><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>); &#125;, <span class="hljs-number">1000</span>);<br><span class="hljs-comment">//这是同步写法,这样写会先改变状态,再指定回调</span><br><span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>); <br>&#125;);<br>p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);&#125;, <span class="hljs-function"><span class="hljs-params">reason</span> =&gt;</span> &#123;&#125;)<br></code></pre></td></tr></table></figure>

<h4 id="4-3-改变-promise-状态和指定回调函数谁先谁后"><a href="#4-3-改变-promise-状态和指定回调函数谁先谁后" class="headerlink" title="4.3 改变 promise 状态和指定回调函数谁先谁后?"></a>4.3 改变 promise 状态和指定回调函数谁先谁后?</h4><p>(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调 </p>
<p>​    先指定回调再改变状态(<code>异步</code>):先指定回调–&gt; 再改变状态 –&gt;改变状态后才进入异步队列执行回调函数</p>
<p>​    先改状态再指定回调(<code>同步</code>):改变状态 –&gt;指定回调 <code>并马上执行</code>回调</p>
<p>(2) 如何先改状态再<code>指定</code>回调?   –&gt;注意:指定并不是执行</p>
<p>​    ① 在执行器中直接调用 resolve()&#x2F;reject() –&gt;即,不使用定时器等方法,执行器内直接同步操作 </p>
<p>​    ② 延迟更长时间才调用 then()     –&gt;即,在<code>.then()</code>这个方法外再包一层例如延时器这种方法</p>
<p>(3) 什么时候才能得到数据? </p>
<p>​    ① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据 </p>
<p>​    ② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br><span class="hljs-comment">//异步写法,这样写会先指定回调,再改变状态</span><br><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>); &#125;, <span class="hljs-number">1000</span>);<br><span class="hljs-comment">//这是同步写法,这样写会先改变状态,再指定回调</span><br><span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>); <br>&#125;);<br>p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);&#125;, <span class="hljs-function"><span class="hljs-params">reason</span> =&gt;</span> &#123;&#125;)<br></code></pre></td></tr></table></figure>

<p>(4) 个人理解–结合源码</p>
<p>​    源码中,promise的状态是通过一个<code>默认为padding</code>的变量进行判断,所以当你<code>resolve/reject</code>延时(异步导致当then加载时,状态还未修改)后,这时直接进行p.then()会发现,目前状态还是<code>进行中</code>,所以只是这样导致只有同步操作才能成功.</p>
<p>​    所以promise将传入的<code>回调函数</code>拷贝到promise对象实例上,然后在<code>resolve/reject</code>的执行过程中再进行调用,达到异步的目的</p>
<h4 id="4-4-promise-then-返回的新-promise-的结果状态由什么决定"><a href="#4-4-promise-then-返回的新-promise-的结果状态由什么决定" class="headerlink" title="4.4 promise.then()返回的新 promise 的结果状态由什么决定?"></a>4.4 promise.then()返回的新 promise 的结果状态由什么决定?</h4><p>(1) 简单表达: 由 then()指定的回调函数执行的结果决定 </p>
<p>(2) 详细表达: </p>
<p>​    ① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常 </p>
<p>​    ② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值 </p>
<p>​    ③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br><span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;ok&#x27;</span>);<br>&#125;);<br><span class="hljs-comment">//执行 then 方法</span><br><span class="hljs-keyword">let</span> result = p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);<br><span class="hljs-comment">// 1. 抛出错误 ,变为 rejected</span><br><span class="hljs-keyword">throw</span> <span class="hljs-string">&#x27;出了问题&#x27;</span>;<br><span class="hljs-comment">// 2. 返回结果是非 Promise 类型的对象,新 promise 变为 resolved</span><br><span class="hljs-keyword">return</span> <span class="hljs-number">521</span>;<br><span class="hljs-comment">// 3. 返回结果是 Promise 对象,此 promise 的结果就会成为新 promise 的结果</span><br><span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<br><span class="hljs-comment">// resolve(&#x27;success&#x27;);</span><br><span class="hljs-title function_">reject</span>(<span class="hljs-string">&#x27;error&#x27;</span>);<br>&#125;);<br>&#125;, <span class="hljs-function"><span class="hljs-params">reason</span> =&gt;</span> &#123;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">warn</span>(reason);<br>&#125;);<br></code></pre></td></tr></table></figure>

<h4 id="4-5-promise-如何串连多个操作任务"><a href="#4-5-promise-如何串连多个操作任务" class="headerlink" title="4.5 promise 如何串连多个操作任务?"></a>4.5 promise 如何串连多个操作任务?</h4><p>(1) promise 的 then()返回一个新的 promise, 可以开成 then()的链式调用 </p>
<p>(2) 通过 then 的链式调用串连多个同步&#x2F;异步任务,这样就能用<code>then()</code>将多个同步或异步操作串联成一个同步队列</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123; <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>); &#125;, <span class="hljs-number">1000</span>); &#125;);</span><br><span class="language-javascript">p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123; <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&quot;success&quot;</span>); &#125;);&#125;)</span><br><span class="language-javascript">.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);&#125;)</span><br><span class="language-javascript">.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(value);&#125;)</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="4-6-promise-异常传透"><a href="#4-6-promise-异常传透" class="headerlink" title="4.6 promise 异常传透?"></a>4.6 promise 异常传透?</h4><ul>
<li>当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调</li>
<li>前面任何操作出了异常, 都会传到最后失败的回调中处理</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-title function_">getJSON</span>(<span class="hljs-string">&#x27;./aodi.json&#x27;</span>)<br>   .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">posts</span>) &#123; <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&#x27;抛出异常&#x27;</span>) &#125;)<br>	.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res),<span class="hljs-function"><span class="hljs-params">e</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;被then的错误回调捕获&#x27;</span>,e) )<br>   .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) &#123;<br>		 <span class="hljs-comment">// 处理 getJSON 和 前一个回调函数运行时发生的错误</span><br> 		<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;错误捕获: &#x27;</span>, error);<br>	&#125;);<br><span class="hljs-comment">//执行结果: 被then的错误回调捕获 Error: 抛出异常</span><br><br><span class="hljs-comment">/******************** 利用异常穿透 ****************************************/</span><br><span class="hljs-title function_">getJSON</span>(<span class="hljs-string">&#x27;./hong.json&#x27;</span>)<br>   .<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">posts</span>) &#123; <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&#x27;抛出异常&#x27;</span>) &#125;)<br>	.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">res</span>=&gt;</span><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(res) ) <span class="hljs-comment">//此处差异,不指定 reject 回调,利用异常穿透传到最后</span><br>   .<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">error</span>) &#123;<br> 		<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;错误捕获: &#x27;</span>, error);<br>	&#125;);<br><span class="hljs-comment">//执行结果:  错误捕获:  Error: 抛出异常</span><br></code></pre></td></tr></table></figure>

<h4 id="4-7-中断-promise-链"><a href="#4-7-中断-promise-链" class="headerlink" title="4.7 中断 promise 链?"></a>4.7 中断 promise 链?</h4><p>在<code>关键问题2</code>中,可以得知,当promise状态改变时,他的链式调用都会生效,那如果我们有这个一个实际需求:我们有5个then(),但其中有条件判断,如当我符合或者不符合第三个then条件时,要直接中断链式调用,不再走下面的then,该如何?</p>
<p>(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数 </p>
<p>(2) 办法: 在回调函数中返回一个 <code>pendding</code> 状态的<code>promise 对象</code></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">let</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> &#123;<span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123; <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;OK&#x27;</span>);&#125;, <span class="hljs-number">1000</span>);&#125;);</span><br><span class="language-javascript">p.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123;<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">() =&gt;</span> &#123;&#125;);&#125;)<span class="hljs-comment">//有且只有这一个方式</span></span><br><span class="language-javascript">.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">222</span>);&#125;)</span><br><span class="language-javascript">.<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">333</span>);&#125;)</span><br><span class="language-javascript">.<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">reason</span> =&gt;</span> &#123;<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">warn</span>(reason);&#125;);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="5-Promise的实际应用"><a href="#5-Promise的实际应用" class="headerlink" title="5. Promise的实际应用"></a>5. Promise的实际应用</h2><p>加载图片的例子：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">const</span> preloadImage = <span class="hljs-keyword">function</span> (<span class="hljs-params">path</span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) &#123;<br>        <span class="hljs-keyword">const</span> image = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Image</span>();<br>        image.<span class="hljs-property">onload</span> = resolve;<br>        image.<span class="hljs-property">onerror</span> = reject;<br>        image.<span class="hljs-property">src</span> = path;<br>    &#125;);<br>&#125;;<br></code></pre></td></tr></table></figure>

<p>使用 Generator 函数管理流程，遇到异步操作的时候，通常返回一个<code>Promise</code>对象。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">getFoo</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">resolve, reject</span>) &#123;<br>        <span class="hljs-title function_">resolve</span>(<span class="hljs-string">&#x27;foo&#x27;</span>);<br>    &#125;);<br>&#125;<br><br><span class="hljs-keyword">const</span> g = <span class="hljs-keyword">function</span>* () &#123;<br>    <span class="hljs-keyword">try</span> &#123;<br>        <span class="hljs-keyword">const</span> foo = <span class="hljs-keyword">yield</span> <span class="hljs-title function_">getFoo</span>();<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(foo);<br>    &#125; <span class="hljs-keyword">catch</span> (e) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);<br>    &#125;<br>&#125;;<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">run</span>(<span class="hljs-params">generator</span>) &#123;<br>    <span class="hljs-keyword">const</span> it = <span class="hljs-title function_">generator</span>();<br><br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">go</span>(<span class="hljs-params">result</span>) &#123;<br>        <span class="hljs-keyword">if</span> (result.<span class="hljs-property">done</span>) <span class="hljs-keyword">return</span> result.<span class="hljs-property">value</span>;<br><br>        <span class="hljs-keyword">return</span> result.<span class="hljs-property">value</span>.<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">value</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-title function_">go</span>(it.<span class="hljs-title function_">next</span>(value));<br>        &#125;, <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-title function_">go</span>(it.<span class="hljs-keyword">throw</span>(error));<br>        &#125;);<br>    &#125;<br><br>    <span class="hljs-title function_">go</span>(it.<span class="hljs-title function_">next</span>());<br>&#125;<br><br><span class="hljs-title function_">run</span>(g);<br></code></pre></td></tr></table></figure>

<h1 id="二、Promise-async-await"><a href="#二、Promise-async-await" class="headerlink" title="二、Promise+ async + await"></a>二、Promise+ async + await</h1><p>1)Promise&#x3D;&#x3D;&gt;异步</p>
<p>2)await&#x3D;&#x3D;&gt;异步转同步</p>
<ol>
<li>await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部，不能单独使用。</li>
<li>await 后面可以跟任何的JS 表达式。虽然说 await 可以等很多类型的东西，但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行</li>
</ol>
<p>3)async&#x3D;&#x3D;&gt;同步转异步</p>
<ol>
<li>方法体内部的某个表达式使用await修饰，那么这个方法体所属方法必须要用async修饰所以使用awit方法会自动升级为异步方法</li>
</ol>
<h2 id="1-async函数"><a href="#1-async函数" class="headerlink" title="1. async函数"></a>1. async函数</h2><ol>
<li>函数的返回值为 promise 对象 </li>
<li>promise 对象的结果由 async 函数执行的返回值决定</li>
</ol>
<h2 id="2-await表达式"><a href="#2-await表达式" class="headerlink" title="2. await表达式"></a>2. await表达式</h2><ol>
<li><p>await 右侧的表达式一般为 promise 对象, 但也可以是其它的值 </p>
</li>
<li><p>如果表达式是 promise 对象, await 返回的是 promise 成功的值 </p>
</li>
<li><p>如果表达式是其它值, 直接将此值作为 await 的返回值</p>
</li>
</ol>
<h2 id="3-注意"><a href="#3-注意" class="headerlink" title="3.注意"></a>3.注意</h2><ol>
<li>await 必须写在 async 函数中, 但 async 函数中可以没有 await </li>
<li>如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理</li>
</ol>
<h4 id=""><a href="#" class="headerlink" title=""></a></h4><h1 id="三、宏任务与微任务"><a href="#三、宏任务与微任务" class="headerlink" title="三、宏任务与微任务"></a>三、宏任务与微任务</h1><ol>
<li>JS中用来存储待执行回调函数的队列包含2个不同特定的列队</li>
</ol>
<ul>
<li><code>宏队列</code>:用来保存待执行的宏任务(回调),比如:<code>定时器</code>回调&#x2F;ajax回调&#x2F;dom事件回调</li>
<li><code>微队列</code>:用来保存待执行的微任务(回调),比如:<code>Promise</code>的回调&#x2F;muntation回调</li>
</ul>
<ol start="2">
<li>JS执行时会区别这2个队列:<ul>
<li>JS执行引擎首先必须执行所有的<code>初始化同步任务</code>代码</li>
<li>每次准备取出第一个<code>宏任务执行前</code>,都要将所有的<code>微任务</code>一个一个取出来执行</li>
<li><strong>同步任务</strong> –&gt; <strong>微任务</strong> –&gt; <strong>宏任务</strong></li>
</ul>
</li>
</ol>
<h2 id="1-代码与示例"><a href="#1-代码与示例" class="headerlink" title="1. 代码与示例"></a>1. 代码与示例</h2><h3 id="1-1-首先给出注释的栗子举一个"><a href="#1-1-首先给出注释的栗子举一个" class="headerlink" title="1.1 首先给出注释的栗子举一个"></a>1.1 首先给出注释的栗子举一个</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123; <br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;timeout callback1（）&#x27;</span>)<span class="hljs-comment">//立即放入宏队列</span><br>   <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-number">3</span>).<span class="hljs-title function_">then</span>(<br>     <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <br>       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Promise onResolved3()&#x27;</span>, value)<span class="hljs-comment">//当这个宏任务执行后 立马放入微队列,所以这个微任务执行完后下个宏任务才能执行 </span><br>     &#125;<br>   )<br> &#125;, <span class="hljs-number">0</span>)<br><br> <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123; <br>   <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;timeout callback2（）&#x27;</span>) <span class="hljs-comment">//立即放入宏队列,</span><br> &#125;, <span class="hljs-number">0</span>)<br><br> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-number">1</span>).<span class="hljs-title function_">then</span>(<br>   <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Promise onResolved1()&#x27;</span>, value)<span class="hljs-comment">//立即放入微队列</span><br>     <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> &#123;<br>       <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;timeout callback3（）&#x27;</span>, value) <span class="hljs-comment">//立即放入宏任务</span><br>     &#125;, <span class="hljs-number">0</span>)<br>   &#125;<br> )<br><br> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">resolve</span>(<span class="hljs-number">2</span>).<span class="hljs-title function_">then</span>(<br>   <span class="hljs-function"><span class="hljs-params">value</span> =&gt;</span> &#123; <br>     <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Promise onResolved2()&#x27;</span>, value)<span class="hljs-comment">//立即放入微队列</span><br>   &#125;<br> )<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;同步代码&#x27;</span>) <span class="hljs-comment">//同步代码立即执行</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-string">&#x27;同步代码&#x27;</span>,<br><span class="hljs-string">&#x27;Promise onResolved1()&#x27;</span>,<br><span class="hljs-string">&#x27;Promise onResolved2()&#x27;</span>,<br><span class="hljs-string">&#x27;timeout callback1（）&#x27;</span>,<br><span class="hljs-string">&#x27;Promise onResolved3()&#x27;</span>,<br><span class="hljs-string">&#x27;timeout callback2（）&#x27;</span>,<br><span class="hljs-string">&#x27;timeout callback3（）&#x27;</span><br></code></pre></td></tr></table></figure>



<h3 id="1-2-尝试自己思考下"><a href="#1-2-尝试自己思考下" class="headerlink" title="1.2 尝试自己思考下"></a>1.2 尝试自己思考下</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;代码开始执行&#x27;</span>),<span class="hljs-number">0</span>)<br><span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>) =&gt;</span> &#123;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;开始for循环&#x27;</span>);<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">10000</span>;i++)&#123;<br>i == <span class="hljs-number">99</span> &amp;&amp; <span class="hljs-title function_">resolve</span>()<br>&#125;<br>&#125;).<span class="hljs-title function_">then</span>(<span class="hljs-function">() =&gt;</span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;执行then函数&#x27;</span>))<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;代码执行结束&#x27;</span>);<br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs js">开始<span class="hljs-keyword">for</span>循环<br>代码执行结束<br>执行then函数<br>代码开始执行<br></code></pre></td></tr></table></figure>
            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
              </div>
              <p class="note note-warning">
                <strong>本文作者: </strong><a href="/HexoPage/">xiao_aodi</a> <br>
                <!-- <strong>本文链接: </strong><a href="http://xiao_aodi.gitee.io/hexopage/2022/03/24/Promise%E7%AC%94%E8%AE%B0/">http://xiao_aodi.gitee.io/hexopage/2022/03/24/Promise%E7%AC%94%E8%AE%B0/</a> <br> -->
                <strong>版权声明: </strong>本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                   </p>
                   

              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/HexoPage/2022/03/26/ES%E5%85%A8%E7%B3%BB%E5%88%97%E8%AF%A6%E7%BB%86%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">ES全系列详细学习笔记</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/HexoPage/2022/03/23/Ajax%E8%AE%B0%E5%BD%95(%E8%AF%A6%E8%A7%A3)/">
                        <span class="hidden-mobile">Ajax学习记录(详解)</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  
   <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>  
  <!-- 添加网站运行时间 -->
  <div class="footer-content">
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script>
      var now = new Date();
      function createtime(){
          var grt= new Date("03/10/2022 00:00:00");//此处修改你的建站时间或者网站上线时间
          now.setTime(now.getTime()+250);
          days = (now - grt ) / 1000 / 60 / 60 / 24;
          dnum = Math.floor(days);
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if(String(hnum).length ==1 ){
              hnum = "0" + hnum;
          }
          minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if(String(mnum).length ==1 ){
                    mnum = "0" + mnum;
          }
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if(String(snum).length ==1 ){
                    snum = "0" + snum;
          }
          document.getElementById("timeDate").innerHTML = "🚀 &nbsp"+dnum+"&nbsp天";  //此次自定义显示内容
          document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
      }  //此次自定义显示内容
      setInterval("createtime()",250);
      </script>
    </div>
  </div>
  <!-- 统计访问量信息 -->
  
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


  <!-- 个人和备案信息 -->
  <div>©2022-2023<a target="_blank" rel="noopener" href="https://clearlight.blog.csdn.net/">ClearlightY</a> <a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">冀ICP备19019307号-2</a></div>
   
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/HexoPage/img/police_beian.png" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>




  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/HexoPage/js/events.js" ></script>
<script  src="/HexoPage/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/HexoPage/js/local-search.js" ></script>





  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/HexoPage/js/boot.js" ></script>


</body>
</html>
